var arrT;
$.get('./data/data.json', {}, function (data) {
    // 渲染TAB栏
    arrT = data.username.user;
    var str = ''
    var strcent = ''
    for (let i = 0; i < arrT.length; i++) {
        str += `

        <li>
            <h3>${arrT[i].live}</h3>
            <p>${arrT[i].jingxuan}</p>
            <div class="shuxian"></div>
        </li>
        `
    }
    $('.list').html(str)
    $('.list li').children('h3').eq(0).addClass('oh3');
    fun(data, $('.list li'))
    Ran(data, $('.list li').children('h3').eq(0).text())


})
// 点击事件
function fun(data, list) {
    $(list).click(function () {
        var cent = $(this).children('h3').text();
        $(list).children('h3').removeClass('oh3')
        $(this).children('h3').addClass('oh3')
        Ran(data, cent)
    })

}

// 渲染
function Ran(data, cent) {
    console.log(cent);
    var str1 = ''
    for (let i = 0; i < arrT.length; i++) {
        if (cent == arrT[i].live) {
            var len = arrT[i].content.contents
            for (let k = 0; k < len.length; k++) {
                // console.log(len[k]);

                if (len[k].zhiying) {
                    str1 += `
                 <li>
                    <img src="${len[k].images}"
                        alt="">
                        <p>
                            <i>自营</i> <a href="#">${len[k].text}</a>
                        </p>
                        <div><span>￥</span> <a href="#">${len[k].pice}</a><u>${len[k].pice2}</u></div>
                        <nav class="mc">
                            <div>
                            <em class='oem'></em>
                            <span>找相似<span>
                            </div>
                        </nav>
                    </li>

                `
                }
                else if (len[k].text2) {
                    str1 += `
                    <li style='background: url(${len[k].images3}) no-repeat 0px 0px;'>
                        <img src="${len[k].images}"
                            alt="" style='margin-top: -10px;'>
                            <p style="-webkit-line-clamp: 3;">
                                <a href="#" class='osa'>${len[k].text}</a> <br>
                                <a href="#" class='osa1'>${len[k].text2}</a><br>
                                <a href="#" class='osa2'>${len[k].text3}</a>
                            </p>
                            <div class='boxBJ' style='background: url(${len[k].images2}) no-repeat 0px 0px;'>${len[k].text4}</div>
                            </li>
                    `
                }
                else {
                    str1 += `
                <li>
                    <img src="${len[k].images}"
                        alt="">
                        <p>
                            <a href="#">${len[k].text}</a>
                        </p>
                        <div><span>￥</span> <a href="#">${len[k].pice}</a><u>${len[k].pice2}</u></div>
                        <nav class="mc">
                        <div>
                        <em class='oem'></em>
                        <span>找相似<span>
                        </div>
                        </nav>
                </li>
                `
                }
            }
        }
    }
    $('nav ul').html(str1)
}
